<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <title>Title</title>
    <style>
        body {
            background-color: #fefefe;
        }

        .u-btn{-webkit-user-select:none; cursor:pointer;display:inline-block;border:1px solid #dcdcdc;border-radius: 3px;padding:5px 10px;}
        /*.u-btn:before {
            content: '1';
        }*/
        .u-btn:active{box-shadow:inset 0 0 3px #666;}
        /*.u-btn-flex{display:-webkit-inline-box;}*/

        .u-btn span{font-size: 14px;}
        .u-btn img{vertical-align:middle;}
        /*第一种方法：button background-image*/
        .btn-1 {background:url('./assets/icon.png') left center no-repeat;border:1px solid #cdcdcd;background-size: 16px 16px;padding-left: 20px;}

        /**/
        .p2{background:url('./assets/icon.png') left center no-repeat;background-size: 16px 16px;padding-left: 20px;}
    </style>
</head>
<body>
<div>
    <p><img src="./assets/icon.png"/>详情<p>
    <button class="btn-1"><span>详情</span></button>
    <p class="p2">详情</p>

    <a class="u-btn"><img src="./assets/icon.png" width="16px"/> <span>详情</span></a>
    <button class="u-btn u-btn-flex"><img src="./assets/icon.png" width="16px"/> <span>详情</span></button>
</div>
</body>
</html>